<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Input Vue Component | Framework7 Vue Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Input Vue Component | Framework7 Vue Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
                <li><a href="vue-component-extensions.html">Vue Component Extensions</a></li>
                <li><a href="navigation-router.html">Navigation / Router</a></li>
                <li><a href="colors.html">Color Properties</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Vue Components</div>
              <ul>
                <li><a href="app.html">App</a></li>
                <li><a href="accordion.html">Accordion</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icon.html">Icon</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-item.html">List Item</a></li>
                <li><a href="list-button.html">List Button</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable.html">Sortable</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="view.html">View</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Input / Form Elements Vue Components</h1>
          <ul class="docs-index"></ul>
          <p>Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known <a href="../docs/list-view.html">List View</a> (<b><a href="list-view.html">List</a> and <a href="list-item.html">List Item</a> Vue components</b>) but with few additional components.</p>
          <p>Check out Framework7's <a href="../docs/inputs.html">Inputs / Form Elements</a> for their appearance.</p>
          <h2>Input Components</h2>
          <p>There are following components included:</p>
          <ul>
            <li><code><b>f7-list-input</b></code> - list item input element</li>
            <li><code><b>f7-input</b></code> - input element</li>
            <li><code><b>f7-label</b></code> - input label element</li>
          </ul>
          <div class="important-note">
            <p>Since Framework7 3.5.0 it is highly recommended that you only use <code><b>f7-list-input</b></code> component. It combines f7-list-item, f7-label and f7-input components in one component and provides much better and more correct input's state handling.</p>
          </div>
          <h2>Input Properties</h2>
          <table class="params-table">
            <thead>
              <tr>
                <th>Prop</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th colspan="4">&lt;f7-list-input&gt; properties</th>
              </tr>
              <tr>
                <td>id</td>
                <td>string</td>
                <td></td>
                <td>Wrapping element ID attribute</td>
              </tr>
              <tr>
                <td>media</td>
                <td>string</td>
                <td></td>
                <td>List item media image URL</td>
              </tr>
              <tr>
                <td>label</td>
                <td>string</td>
                <td></td>
                <td>Input's label text</td>
              </tr>
              <tr>
                <td>inline-label</td>
                <td>boolean</td>
                <td>false</td>
                <td>Makes label inline</td>
              </tr>
              <tr>
                <td>floating-label</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enables floating label (affects MD theme only)</td>
              </tr>
              <tr>
                <td>input</td>
                <td>boolean</td>
                <td>true</td>
                <td>Whether it should render input element or not. Disable if you want to use custom input inside.</td>
              </tr>
              <tr>
                <td>type</td>
                <td>string</td>
                <td></td>
                <td>Input type. All default HTML5 input type, and few special ones:
                  <ul>
                    <li><b>textarea</b> - to render textarea element</li>
                    <li><b>select</b> - to render select element</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>resizable</td>
                <td>boolean</td>
                <td>false</td>
                <td>Makes textarea resizable</td>
              </tr>
              <tr>
                <td>inputStyle</td>
                <td>string<br>object</td>
                <td></td>
                <td>Value of input's "style" attribute, in case you need to pass extra styles</td>
              </tr>
              <tr>
                <td>clear-button</td>
                <td>boolean</td>
                <td>false</td>
                <td>Adds input clear button that will clear input value on click</td>
              </tr>
              <tr>
                <td>validate</td>
                <td>boolean</td>
                <td>false</td>
                <td>When enabled then input value will be validated on change based on passed "pattern" or based on input type. If you use custom validation and need more control on where to show/hide error message, then it is better to disable validation and use <code>error-message</code> together with <code>error-message-force</code> props.</td>
              </tr>
              <tr>
                <td>error-message</td>
                <td>string</td>
                <td></td>
                <td>Custom error message to show when input value is invalid</td>
              </tr>
              <tr>
                <td>error-message-force</td>
                <td>boolean</td>
                <td>false</td>
                <td>Force error message to force. Useful in case you use custom validation and want to show/hide error message when you need it</td>
              </tr>
              <tr>
                <td>info</td>
                <td>string</td>
                <td></td>
                <td>Custom additional text with information about input</td>
              </tr>
              <tr>
                <td>name</td>
                <td>string</td>
                <td></td>
                <td>Input name</td>
              </tr>
              <tr>
                <td>placeholder</td>
                <td>string</td>
                <td></td>
                <td>Input placeholder</td>
              </tr>
              <tr>
                <td>input-id</td>
                <td>string</td>
                <td></td>
                <td>Input element ID attribute</td>
              </tr>
              <tr>
                <td>value</td>
                <td>string<br>number</td>
                <td></td>
                <td>Input value</td>
              </tr>
              <tr>
                <td>default-value</td>
                <td>string<br>number</td>
                <td></td>
                <td>Input value, in case of uncontrolled component</td>
              </tr>
              <tr>
                <td>size</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "size" attribute</td>
              </tr>
              <tr>
                <td>pattern</td>
                <td>string</td>
                <td></td>
                <td>Value of input's native "pattern" attribute</td>
              </tr>
              <tr>
                <td>accept</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "accept" attribute</td>
              </tr>
              <tr>
                <td>autocomplete</td>
                <td>string</td>
                <td></td>
                <td>Value of input's native "autocomplete" attribute</td>
              </tr>
              <tr>
                <td>autofocus</td>
                <td>boolean</td>
                <td>false</td>
                <td>Value of input's native "autofocus" attribute</td>
              </tr>
              <tr>
                <td>autosave</td>
                <td>string</td>
                <td></td>
                <td>Value of input's native "autosave" attribute</td>
              </tr>
              <tr>
                <td>checked</td>
                <td>boolean</td>
                <td>false</td>
                <td>Marks input as checked</td>
              </tr>
              <tr>
                <td>disabled</td>
                <td>boolean</td>
                <td>false</td>
                <td>Marks input as disabled</td>
              </tr>
              <tr>
                <td>max</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "max" attribute</td>
              </tr>
              <tr>
                <td>min</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "min" attribute</td>
              </tr>
              <tr>
                <td>step</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "step" attribute</td>
              </tr>
              <tr>
                <td>maxlength</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "maxlength" attribute</td>
              </tr>
              <tr>
                <td>minlength</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "minlength" attribute</td>
              </tr>
              <tr>
                <td>multiple</td>
                <td>boolean</td>
                <td>false</td>
                <td>Value of input's native "multiple" attribute</td>
              </tr>
              <tr>
                <td>readonly</td>
                <td>boolean</td>
                <td>false</td>
                <td>Marks input as readonly</td>
              </tr>
              <tr>
                <td>required</td>
                <td>boolean</td>
                <td>false</td>
                <td>Marks input as required</td>
              </tr>
              <tr>
                <td>tabindex</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "tabindex" attribute</td>
              </tr>
              <tr>
                <td>no-store-data</td>
                <td>boolean</td>
                <td>false</td>
                <td>Allows to ignore input value to be stored when using with <a href="../docs/form.html#form-storage">Form Storage</a></td>
              </tr>
              <tr>
                <td>ignore-store-data</td>
                <td>boolean</td>
                <td>false</td>
                <td>Same as previous</td>
              </tr>
              <tr>
                <th colspan="4">&lt;f7-label&gt; properties</th>
              </tr>
              <tr>
                <td>floating</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enables floating label (affects MD theme only)</td>
              </tr>
              <tr>
                <td>inline</td>
                <td>boolean</td>
                <td>false</td>
                <td>Makes label inline</td>
              </tr>
              <tr>
                <th colspan="4">&lt;f7-input&gt; properties</th>
              </tr>
              <tr>
                <td>wrap</td>
                <td>boolean</td>
                <td>true</td>
                <td>Defines should the input be wraped with "item-input-wrap" element or not. Must be disabled when using outside of List View</td>
              </tr>
              <tr>
                <td>type</td>
                <td>string</td>
                <td></td>
                <td>Input type. All default HTML5 input type, and few special ones:
                  <ul>
                    <li><b>textarea</b> - to render textarea element</li>
                    <li><b>select</b> - to render select element</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>resizable</td>
                <td>boolean</td>
                <td>false</td>
                <td>Makes textarea resizable</td>
              </tr>
              <tr>
                <td>inputStyle</td>
                <td>string<br>object</td>
                <td></td>
                <td>Value of input's "style" attribute, in case you need to pass extra styles</td>
              </tr>
              <tr>
                <td>clear-button</td>
                <td>boolean</td>
                <td>false</td>
                <td>Adds input clear button that will clear input value on click</td>
              </tr>
              <tr>
                <td>validate</td>
                <td>boolean</td>
                <td>false</td>
                <td>When enabled then input value will be validated on change based on passed "pattern" or based on input type. If you use custom validation and need more control on where to show/hide error message, then it is better to disable validation and use <code>error-message</code> together with <code>error-message-force</code> props.</td>
              </tr>
              <tr>
                <td>error-message</td>
                <td>string</td>
                <td></td>
                <td>Custom error message to show when input value is invalid</td>
              </tr>
              <tr>
                <td>error-message-force</td>
                <td>boolean</td>
                <td>false</td>
                <td>Force error message to force. Useful in case you use custom validation and want to show/hide error message when you need it</td>
              </tr>
              <tr>
                <td>info</td>
                <td>string</td>
                <td></td>
                <td>Custom additional text with information about input</td>
              </tr>
              <tr>
                <td>name</td>
                <td>string</td>
                <td></td>
                <td>Input name</td>
              </tr>
              <tr>
                <td>placeholder</td>
                <td>string</td>
                <td></td>
                <td>Input placeholder</td>
              </tr>
              <tr>
                <td>id</td>
                <td>string</td>
                <td></td>
                <td>Wrapping element ID attribute</td>
              </tr>
              <tr>
                <td>input-id</td>
                <td>string</td>
                <td></td>
                <td>Input element ID attribute</td>
              </tr>
              <tr>
                <td>value</td>
                <td>string<br>number</td>
                <td></td>
                <td>Input value</td>
              </tr>
              <tr>
                <td>size</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "size" attribute</td>
              </tr>
              <tr>
                <td>pattern</td>
                <td>string</td>
                <td></td>
                <td>Value of input's native "pattern" attribute</td>
              </tr>
              <tr>
                <td>accept</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "accept" attribute</td>
              </tr>
              <tr>
                <td>autocomplete</td>
                <td>string</td>
                <td></td>
                <td>Value of input's native "autocomplete" attribute</td>
              </tr>
              <tr>
                <td>autofocus</td>
                <td>boolean</td>
                <td>false</td>
                <td>Value of input's native "autofocus" attribute</td>
              </tr>
              <tr>
                <td>autosave</td>
                <td>string</td>
                <td></td>
                <td>Value of input's native "autosave" attribute</td>
              </tr>
              <tr>
                <td>checked</td>
                <td>boolean</td>
                <td>false</td>
                <td>Marks input as checked</td>
              </tr>
              <tr>
                <td>disabled</td>
                <td>boolean</td>
                <td>false</td>
                <td>Marks input as disabled</td>
              </tr>
              <tr>
                <td>max</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "max" attribute</td>
              </tr>
              <tr>
                <td>min</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "min" attribute</td>
              </tr>
              <tr>
                <td>step</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "step" attribute</td>
              </tr>
              <tr>
                <td>maxlength</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "maxlength" attribute</td>
              </tr>
              <tr>
                <td>minlength</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "minlength" attribute</td>
              </tr>
              <tr>
                <td>multiple</td>
                <td>boolean</td>
                <td>false</td>
                <td>Value of input's native "multiple" attribute</td>
              </tr>
              <tr>
                <td>readonly</td>
                <td>boolean</td>
                <td>false</td>
                <td>Marks input as readonly</td>
              </tr>
              <tr>
                <td>required</td>
                <td>boolean</td>
                <td>false</td>
                <td>Marks input as required</td>
              </tr>
              <tr>
                <td>tabindex</td>
                <td>string<br>number</td>
                <td></td>
                <td>Value of input's native "tabindex" attribute</td>
              </tr>
              <tr>
                <td>no-store-data</td>
                <td>boolean</td>
                <td>false</td>
                <td>Allows to ignore input value to be stored when using with <a href="../docs/form.html#form-storage">Form Storage</a></td>
              </tr>
              <tr>
                <td>ignore-store-data</td>
                <td>boolean</td>
                <td>false</td>
                <td>Same as previous</td>
              </tr>
            </tbody>
          </table>
          <h2>Input Events</h2>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Arguments</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th colspan="3">&lt;f7-list-input&gt;, &lt;f7-input&gt; events</th>
              </tr>
              <tr>
                <td>focus</td>
                <td><span>(event)</span></td>
                <td>Fired when user focused to input.</td>
              </tr>
              <tr>
                <td>blur</td>
                <td><span>(event)</span></td>
                <td>Fired when user lost focus from input.</td>
              </tr>
              <tr>
                <td>input</td>
                <td><span>(event)</span></td>
                <td>Fired immediately when input value changed. Note: Input event triggers after beforeinput, keypress, keyup, keydown events.</td>
              </tr>
              <tr>
                <td>change</td>
                <td><span>(event)</span></td>
                <td>Fired when blur if value changed.</td>
              </tr>
              <tr>
                <td>input:clear</td>
                <td><span>(event)</span></td>
                <td>Fired when input clear button clicked</td>
              </tr>
              <tr>
                <td>textarea:resize</td>
                <td><span>(event)</span></td>
                <td>Fired if resizable textarea resized. <code>event.detail</code> will contain object with the <code>initialHeight</code>, <code>currentHeight</code> and <code>scrollHeight</code> properties</td>
              </tr>
              <tr>
                <td>input:empty</td>
                <td><span>(event)</span></td>
                <td>Fired when input value becomes empty</td>
              </tr>
              <tr>
                <td>input:notempty</td>
                <td><span>(event)</span></td>
                <td>Fired when input value becomes not empty</td>
              </tr>
            </tbody>
          </table>
          <h2>Input Slots</h2>
          <p>Input Vue component (<code>&lt;f7-list-input&gt;</code>) has additional slots for custom elements:</p>
          <ul>
            <li><code><b>default</b></code> - in case of <code>type="select"</code> or <code>type="textarea"</code> - element will be placed inside of <code>select</code> or <code>textarea</code> tags.</li>
            <li><code><b>info</b></code> - element will be inserted into container with info message</li>
            <li><code><b>error-message</b></code> - element will be inserted into container with error message</li>
            <li><code><b>label</b></code> - element will be inserted into container with input's label</li>
            <li><code><b>input</b></code> - element will be inserted instead of input element (<code>input</code> prop must be also set to <code>false</code>)</li>
            <li><code><b>root-start</b></code> - element will be inserted in the beginning of <code>&lt;li&gt;</code> element</li>
            <li><code><b>root</b></code> / <code><b>root-end</b></code> - element will be inserted in the end of <code>&lt;li&gt;</code> element</li>
            <li><code><b>content-start</b></code> - element will be inserted in the beginning of <code>&lt;div class="item-content"&gt;</code> element</li>
            <li><code><b>content</b></code> / <code><b>content-end</b></code> - element will be inserted in the end of <code>&lt;div class="item-content"&gt;</code> element</li>
            <li><code><b>inner-start</b></code> - element will be inserted in the beginning of <code>&lt;div class="item-inner"&gt;</code> element</li>
            <li><code><b>inner</b></code> / <code><b>inner-end</b></code> - element will be inserted in the end of <code>&lt;div class="item-inner"&gt;</code> element</li>
            <li><code><b>media</b></code> - element will be inserted inside of <code>&lt;div class="item-media"&gt;</code> element</li>
          </ul>
          <h2>Input v-model</h2>
          <p><code>v-model</code> <b>is not supported</b> on <code>f7-list-input</code> / <code>f7-input</code> vue components. Instead, just use the combination of <code>value</code> property and <code>@input</code> event:</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
  ...
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>
    <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name = $event.target.value<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword-block">export</span> <span class="token keyword-block">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      name<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre></code>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/vue/inputs.html">Examples</h2><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Full Layout / Inline Labels<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">inline-labels</span> <span class="token attr-name">no-hairlines-md</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Password<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your password<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>E-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Phone<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your phone number<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Gender<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select<span class="token punctuation">"</span></span>
    <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Male<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please choose...<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Male<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Female<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Birthday<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span>
    <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2014-04-30<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please choose...<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Date time<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please choose...<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Range<span class="token punctuation">"</span></span>
    <span class="token attr-name">:input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-range</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">:step</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-range</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Textarea<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bio<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Resizable<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span>
    <span class="token attr-name">resizable</span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bio<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Full Layout / Stacked Labels<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">no-hairlines-md</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Password<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your password<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>E-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Phone<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your phone number<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Gender<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select<span class="token punctuation">"</span></span>
    <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Male<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please choose...<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Male<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Female<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Birthday<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span>
    <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2014-04-30<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please choose...<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Date time<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please choose...<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Range<span class="token punctuation">"</span></span>
    <span class="token attr-name">:input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-range</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">:step</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-range</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Textarea<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bio<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Resizable<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span>
    <span class="token attr-name">resizable</span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bio<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Floating Labels (MD-theme only)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">no-hairlines-md</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span>
    <span class="token attr-name">floating-label</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Password<span class="token punctuation">"</span></span>
    <span class="token attr-name">floating-label</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your password<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>E-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">floating-label</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">floating-label</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Phone<span class="token punctuation">"</span></span>
    <span class="token attr-name">floating-label</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your phone number<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Resizable<span class="token punctuation">"</span></span>
    <span class="token attr-name">floating-label</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span>
    <span class="token attr-name">resizable</span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bio<span class="token punctuation">"</span></span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Validation + Additional Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">no-hairlines-md</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">info</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Default validation<span class="token punctuation">"</span></span>
    <span class="token attr-name">required</span>
    <span class="token attr-name">validate</span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Fruit<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Type 'apple' or 'banana'<span class="token punctuation">"</span></span>
    <span class="token attr-name">required</span>
    <span class="token attr-name">validate</span>
    <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>apple|banana<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pattern validation (<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>apple|banana<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>E-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">info</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Default e-mail validation<span class="token punctuation">"</span></span>
    <span class="token attr-name">required</span>
    <span class="token attr-name">validate</span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">info</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Default URL validation<span class="token punctuation">"</span></span>
    <span class="token attr-name">required</span>
    <span class="token attr-name">validate</span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Number<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter number<span class="token punctuation">"</span></span>
    <span class="token attr-name">info</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>With custom error message<span class="token punctuation">"</span></span>
    <span class="token attr-name">error-message</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Only numbers please!<span class="token punctuation">"</span></span>
    <span class="token attr-name">required</span>
    <span class="token attr-name">validate</span>
    <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>[0-9]*<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Icon + Input<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">no-hairlines-md</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your password<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-list-icon<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>media<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-icon</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Label + Input<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">no-hairlines-md</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Password<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your password<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>E-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Only Inputs<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">no-hairlines-md</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your password<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Inputs + Additional Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">no-hairlines-md</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">info</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Full name please<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your password<span class="token punctuation">"</span></span>
    <span class="token attr-name">info</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8 characters minimum<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">info</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your work e-mail address<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">info</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your website URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Only Inputs Inset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">inset</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your password<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your e-mail<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-input</span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span>
    <span class="token attr-name">clear-button</span>
  <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>